<template>
  <div>
    <!-- 头部状态栏 -->
    <van-nav-bar title="与我相关的所有会议" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <!-- <van-cell title="选择单个日期" :value="date" @click="show = true" /> -->
    <QuickSearch :quickSearch="quickSearch" :needNumber="true" @getSearchInfo="filterList"></QuickSearch>
    <van-tabs v-model="active">
      <van-tab title="收集中">
        <!-- <template #title>
          <van-badge :content="approvelDataList.length">
            <div class="badge_container">收集中</div>
          </van-badge>
        </template>-->

        <ApprovelMeeting :approvelList="approvelDataList"></ApprovelMeeting>
      </van-tab>
      <van-tab title="已锁定">
        <!-- <template #title>
          <van-badge :content="approvelDataListStop.length">
            <div class="badge_container">已锁定</div>
          </van-badge>
        </template>-->
        <ApprovelMeeting :approvelList="approvelDataListStop"></ApprovelMeeting>
      </van-tab>
      <van-tab title="已结束">
        <!-- <template #title>
          <van-badge :content="approvelDataListEnd.length">
            <div class="badge_container">已结束</div>
          </van-badge>
        </template>-->
        <ApprovelMeeting :approvelList="approvelDataListEnd" :allend="true"></ApprovelMeeting>
      </van-tab>
    </van-tabs>
    
    </van-pull-refresh>
  </div>
</template>

<script>
import ApprovelMeeting from "../components/approvelmeeting";
import QuickSearch from "../components/quickSearch";
import apilist from "../utils/apiList";
export default {
  data() {
    return {
      date: "",
      active: 0,
      quickSearch: {
        meetingName: "",
        idNumber: "",
        startDate: "",
        endDate: "",
      },
      approvelAll: [],
      approvelDataList: [],
      approvelDataListEnd: [],
      approvelDataListStop: [],

      isLoading: false,
      timerPlaceholder: {
        start: "行程开始日期",
        end: "行程结束日期",
      },
    };
  },

  created() {
    this.getAllMeeting();
  },
  computed: {},
  methods: {
    onRefresh() {
      window.location.reload();
    },
    getAllMeeting() {
      var _this = this;
      var acc1 = sessionStorage.getItem("accountname");
      if (acc1) {
        var acc0 = JSON.parse(acc1);
        // console.log("acc0", acc0);
        this.$axios({
          method: "get",
          url: apilist[0] + "/GetEventListByName?accountname=" + acc0.cName,
        })
          .then(function (res) {
            _this.approvelAll = res.data;
            _this.filterCate(res.data);
          })
          .catch(function (error) {});
      }
    },
    filterCate(res) {
      let _this = this;
      let p = res;
      p.sort(function (b, a) {
        return (
          new Date(a.StartDate).getTime() - new Date(b.StartDate).getTime()
        );
      });
      console.log(p);
      _this.approvelDataList = [];
      _this.approvelDataListEnd = [];
      _this.approvelDataListStop = [];
      p.map(function (v, i) {
        var ed = v.EndDate;
        v.cost = 0;
        // _this.get_use(v).then((res) => {
        //   v.currentRate = Math.floor(
        //     (v.cost /
        //       ((v.EventBudgetList &&
        //         v.EventBudgetList[0] &&
        //         v.EventBudgetList[0].BudgetAmount) ||
        //         50000)) *
        //       100
        //   );
        // });
        // 换算当前费用用量占比
        // console.log(v.cost);

        if (new Date(ed).getTime() < new Date().getTime() || v.Status == "70") {
          _this.approvelDataListEnd.push(v);
        } else {
          if (v.CollectStatus == "Y") {
            _this.approvelDataList.push(v);
          } else {
            _this.approvelDataListStop.push(v);
          }
        }
      });
      // p.map((v) => {
      //   this.get_use(v).then((res) => {
      //     v.currentRate = Math.floor(
      //       (v.cost /
      //         ((v.EventBudgetList &&
      //           v.EventBudgetList[0] &&
      //           v.EventBudgetList[0].BudgetAmount) ||
      //           50000)) *
      //         100
      //     );
      //   });
      // });
      _this.$forceUpdate();
    },

    async get_use(e, fn) {
      const res = await this.$axios.get(
        apilist[1] + "/GetRocheEventFee?eventid=" + e.IDNo
      );

      e.cost = res.data > 0 ? res.data : 0;
    },
    // 分配个数组内容
    // handleCategory() {
    //   this.approvelDataList.forEach((v, i) => {
    //     if (v.meetingStatus === "参会名单收集中") {
    //       this.waitApprovelList.push(v);
    //     } else if (v.meetingStatus === "已锁定") {
    //       this.freezeApprovelList.push(v);
    //     } else if (v.meetingStatus === "已结束") {
    //       this.endApprovelList.push(v);
    //     }
    //   });
    // },
    // 筛选当前数组
    filterList(search) {
      console.log(search);
      this.approvelDataList = [];
      this.approvelDataListEnd = [];
      this.approvelDataListStop = [];
      let hasfilterList = this.approvelAll;
      hasfilterList = hasfilterList.filter((v) => {
        // console.log("v", v);
        const searchStartTime = new Date(search.startDate).getTime();
        const searchEndTime = new Date(search.endDate).getTime();
        const startTime = new Date(
          v.StartDate.replace(/-/g, "/").replace(/T/g, " ")
        ).getTime();
        const endTime = new Date(
          v.EndDate.replace(/-/g, "/").replace(/T/g, " ")
        ).getTime();
        return (
          (search.meetingName
            ? v.Name.indexOf(search.meetingName) !== -1
            : true) &&
          (searchStartTime ? startTime >= searchStartTime : true) &&
          (searchEndTime ? searchEndTime >= endTime : true) &&
          (search.idNumber ? v.IDNo.indexOf(search.idNumber) !== -1 : true)
        );
      });
      this.filterCate(hasfilterList);
    },

    onClickLeft() {
      this.$router.go(-1);
    },
  },
  components: {
    ApprovelMeeting,
    QuickSearch,
  },
};
</script>

<style lang="less">
.query_area {
  input,
  .query_item {
    width: 100%;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    margin: 5px 0;
  }
  .query_item {
    color: #606266;
  }
  .serach_area {
    text-align: center;
    padding-top: 5px;

    .van-button {
      height: 36px;
    }
  }
}
</style>